import * as echarts from 'echarts'
import left1 from '@/images/soil/weather.png'
import left2 from '@/images/soil/wind.png'
import left3 from '@/images/soil/wet.png'
import left4 from '@/images/soil/rain.png'
import left5 from '@/images/soil/arrow.png'
import right1 from '@/images/soil/city.png'
import right2 from '@/images/soil/road.png'
import right3 from '@/images/soil/home.png'
import right4 from '@/images/soil/gald.png'
export const leftTopData = [
    { icon: left1, name: '实时温度', num: '25°C' },
    { icon: left2, name: '风速', num: '10m/s' },
    { icon: left3, name: '当前湿度', num: '57%' },
    { icon: left4, name: '降水', num: '0' },
    { icon: left5, name: '风向', num: '东南' },
]
export const leftCenter = {
    backgroundColor: 'transparent',
    title: {
        show: true,
        text: '单位/亩',
        textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 12,
        },
        top: '-0%',
        left: '0%',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 255, 233,0)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(255, 255, 255,1)',
                    }, {
                        offset: 1,
                        color: 'rgba(0, 255, 233,0)'
                    }],
                    global: false
                }
            },
        },

    },
    grid: {
        top: '10%',
        left: '0%',
        right: '5%',
        bottom: '15%',
        containLabel: true
    },
    legend: {
        orient: 'horizontal',
        top: '-2%'
    },
    xAxis: [{
        show: true,
        type: 'category',
        axisLine: {
            show: false
        },
        splitArea: {
            show: false,
            color: '#f00',
            lineStyle: {
                color: '#f00'
            },
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#fff',
            show: true,
            inside: true
        },
        splitLine: {
            show: false
        },
        boundaryGap: false,
        data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],

    }],

    yAxis: [{
        // axisLabel: {
        //     //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
        //     formatter: "{value} 亩",
        // },
        type: 'value',
        min: 1000,
        max: 8000
    }],
    series: [{
        name: '玉米',
        type: 'line',
        // smooth: true, //是否平滑
        symbolSize: 0,
        lineStyle: {
            normal: {
                color: "#6c50f3",
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
            },
        },
        label: {
            show: false,
            position: 'top',
            textStyle: {
                color: '#6c50f3',
            },

        },
        itemStyle: {
            color: "#6c50f3",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
        },

        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(108,80,243,1)'
                },
                {
                    offset: 1,
                    color: 'rgba(108,80,243,0)'
                }
                ], false),
                // shadowColor: 'rgba(108,80,243, 0.9)',
                // shadowBlur: 20
            }
        },
        data: [7000, 6800, 5900, 7200, 4712, 6612, 7000, 6800, 5900, 7200, 4712, 6612]

    },
    {
        name: '水稻',
        type: 'line',
        // smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: 'circle',
        symbolSize: 0,
        lineStyle: {
            normal: {
                color: "#00ca95",
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
            },
        },
        label: {
            show: false,
            position: 'top',
            textStyle: {
                color: '#00ca95',
            },

        },

        itemStyle: {
            color: "#00ca95",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
        },

        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,202,149,1)'
                },
                {
                    offset: 1,
                    color: 'rgba(0,202,149,0)'
                }
                ], false),
                // shadowColor: 'rgba(0,202,149, 0.9)',
                // shadowBlur: 20
            }
        },
        data: [7200, 7800, 6600, 3200, 6712, 7612, 7200, 7800, 6600, 3200, 6712, 7612],
    },
    ]
};
export const leftBottomData = {
    tableColumns: [
        { key: 'A111', title: '人员1' },
        { key: 'B111', title: '人员2' },
        { key: 'C111', title: '人员3' },
    ],
    tableRows: [
        {
            A111: '2043',
            B111: '1876',
            C111: '1554',
            ID: '总数'
        },
        {
            A111: '1678',
            B111: '213',
            C111: '433',
            ID: '正常'
        },
        {
            A111: '781',
            B111: '445',
            C111: '33',

            ID: '预警'
        },
        {
            A111: '664',
            B111: '317',
            C111: '115',

            ID: '超限'
        },
        {
            A111: '741',
            B111: '234',
            C111: '15',
            ID: '冻结'
        },
        {
            A111: '124',
            B111: '22',
            C111: '0',
            ID: '督办'
        },
    ],
}
export const rightTopData = [
    { icon: right1, name: '墒情监测站', num: '8' },
    { icon: right2, name: 'AQI', num: '3' },
    { icon: right3, name: '耕地数量', num: '1052' },
    { icon: right4, name: '实验田', num: '448' },
]
export const rightCenterData = {
    background: 'transparent',
    color: ['#4b89b3', '#e23234', '#efc329'],
    tooltip: {},
    radar: {
        radius: '80%',
        triggerEvent: true,
        name: {
            // textStyle: {
            //     color: '#fff',
            //     fontSize: '20',
            //     borderRadius: 3,
            //     padding: [3, 5]
            // }
        },
        nameGap: '2',
        indicator: [{//[4300, 10000, 28000, 35000, 50000, 19000, 21000]
            name: '南关区', max: 100
        },
        { name: '宽城区', max: 100 },
        { name: '朝阳区', max: 100 },
        { name: '二道区', max: 100 },
        { name: '绿园区', max: 100 }
        ],
        splitArea: {
            areaStyle: {
                color: [
                    'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
                    'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
                    'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
                ].reverse()
            }
        },
        // axisLabel:{//展示刻度
        //     show: true
        // },
        axisLine: { //指向外圈文本的分隔线样式
            lineStyle: {
                color: 'rgba(0,0,0,0)'
            }
        },
        splitLine: {
            lineStyle: {
                width: 2,
                color: [
                    'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
                    'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
                    'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
                ].reverse()
            }
        },

    },
    legend:{
        show:true,
        orient: 'vertical',
        top: '-2%',
        left:0,
        data:['播种期','生长期','收获期']
    },
    series: [{
        name: '播种期',
        type: 'radar',
        //areaStyle: {normal: {}},
        areaStyle: {
            normal: {
                color: 'rgba(252,211,3, 0.3)'
            }
        },
        symbolSize: 0,
        lineStyle: {
            normal: {
                color: 'rgba(252,211,3, 1)',
                width: 1
            }
        },
        data: [{
            value: [43, 90, 80, 53, 78, 89, 77],
            name: '人数',
        }
        ]
    }, {
        name: '生长期',
        type: 'radar',
        areaStyle: {
            normal: {
                color: 'rgba(255,292,203, 0.3)'
            }
        },
        symbolSize: 0,
        lineStyle: {
            normal: {
                color: 'rgba(255,292,203, 1)',
                width: 1
            }
        },
        data: [{
            value: [50, 44, 56, 69, 43, 77, 90],
            name: '因素',
        }
        ]
    }, , {
        name: '收获期',
        type: 'radar',
        //areaStyle: {normal: {}},
        areaStyle: {
            normal: {
                color: 'rgba(0,255,0, 0.3)'
            }
        },
        symbolSize: 0,
        lineStyle: {
            normal: {
                color: 'rgba(0,255,0, 1)',
                width: 1
            }
        },
        data: [{
            value: [67, 80, 92, 94, 69, 77, 45],
            name: '因素',
        }
        ]
    }]
}
export const rightBottomData = [
    { name: '长春市环境监测报告', info: '一级告警' },
    { name: '双阳区环境监测报告', info: '一级告警' },
    { name: '九台区环境监测报告', info: '一级告警' },
    { name: '农安县环境监测报告', info: '一级告警' },
    { name: '榆树市环境监测报告', info: '一级告警' },
    { name: '德惠市环境监测报告', info: '一级告警' },
    { name: '公主岭市环境监测报告', info: '一级告警' },
]
export const centerLeft = {
    backgroundColor: 'transparent',
    tooltip: { //提示框组件
        trigger: 'axis',
        formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
        axisPointer: {
            type: 'shadow',
            label: {
                backgroundColor: '#6a7985'
            }
        },
        textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
        }
    },
    grid: {
        left: '-5%',
        right: '4%',
        bottom: '6%',
        top: 30,
        // padding:'0 0 10 0',
        containLabel: true,
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: true,//坐标轴两边留白
            data: ['长春市', '双阳区', '九台区', '农安县', '榆树市', '德惠市', '公主岭市'],
            axisLabel: { //坐标轴刻度标签的相关设置。
                interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                margin: 15,
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                }
            },
            axisTick: {//坐标轴刻度相关设置。
                show: false,
            },
            axisLine: {//坐标轴轴线相关设置
                lineStyle: {
                    color: '#fff',
                    opacity: 0.2
                }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
                show: false,
            }
        }
    ],
    yAxis: [
        {
            show: false,
            type: 'value',
            splitNumber: 5,
            axisLabel: {
                textStyle: {
                    color: '#a8aab0',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#fff'],
                    opacity: 0.06
                }
            }

        }
    ],
    series: [
        {
            name: '水田墒情',
            type: 'bar',
            data: [5149, 4321, 3742, 5176, 4427, 4247, 5020],
            barWidth: 10,
            label: {//图形上的文本标签
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#3DA6FF',
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 12,
                    },
                },
            },
            itemStyle: {//图形样式
                normal: {
                    color: '#3483e4'
                },
            },
        },
        {
            name: '旱地墒情',
            type: 'bar',
            data: [2111, 1457, 1234, 1745, 1794, 1922, 1134],
            barWidth: 10,
            label: {//图形上的文本标签
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#1DC37B',
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 12,
                    },
                },
            },
            itemStyle: {//图形样式
                normal: {
                    color: '#1de5db'
                },
            },
        }
    ]
};
let yList = [32, 58, 64, 64,];
let xList = [10, 55, 44, 55,];
let xData = ['重度干旱', '轻度干旱', '适宜', '偏湿'];
let color = ['#3bd9b9', '#17e193', '#5dbdfd', '#eaf370', '#fdd75b'];

let dom = 400;
let barWidth = dom / 20;
let colors: any = []
for (let i = 0; i < 4; i++) {
    colors.push({
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#73fcff' // 最左边
            }, {
                offset: 0.5,
                color: '#86eef1' // 左边的右边 颜色
            }, {
                offset: 0.5,
                color: '#5ad6d9' // 右边的左边 颜色
            }, {
                offset: 1,
                color: '#3dc8ca'
            }]
    })
}
export const centerRight = {
    backgroundColor: "transparent",
    //提示框
    tooltip: {
        trigger: 'axis',
        formatter: "{b} : {c}",
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    /**区域位置*/
    grid: {
        left: '2%',
        right: '2%',
        top: '10%',
        bottom: '6%',
        containLabel: true,
    },
    //X轴
    xAxis: {
        data: xData,
        type: 'category',
        axisLine: {
            show: false,
            lineStyle: {
                color: '#fff',
                shadowColor: 'rgba(255,255,255,1)',
                shadowOffsetX: '20',
            },
            symbol: ['none', 'arrow'],
            symbolOffset: [0, 25]
        },
        splitLine: {
            show: false,
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            fontSize: 12,
          
                color:'#fff'
        },
    },
    yAxis: {
        show: true,
        splitNumber: 4,
        axisLine: {
            show: false,
        },
        splitLine: {
            show: false,
            lineStyle: {
                type: 'dashed',
                color: '#075858'
            },
        },
        axisLabel: {
            color: '#FFFFFF',
            fontSize: 12
        }
    },
    series: [
        {
            type: 'bar',
            barWidth: barWidth,
            itemStyle: {
                normal: {
                    color: function (params) {
                        return color[params.dataIndex % 5];
                    }
                }
            },
            label: {
                show: false,
                position: [barWidth / 2, -(barWidth + 20)],
                color: '#ffffff',
                fontSize: 14,
                fontStyle: 'bold',
                align: 'center',
            },
            data: yList
        },
        {
            z: 2,
            type: 'pictorialBar',
            data: yList,
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
                normal: {
                    color: function (params) {
                        return color[params.dataIndex % 5];
                    },
                }
            },
        },
        {
            z: 3,
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: yList,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    color: function (params) {
                        return color[params.dataIndex % 5];
                    },

                }
            },
        },
    ],
};